<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>伪类</title>
    <style>
        /* 链接未访问时 */
        a:link {
            color: aquamarine;
        }

        /* 链接访问之后的样式 */
        a:visited {
            color: brown;

        }

        /* 鼠标滑过时 */
        a:hover {
            color: darkblue;
        }

        /* 点击链接的一瞬间的样式 */
        a:active {
            color: pink;
        }

        img {
            width: 250;
        }

        /* 当鼠标滑过图片的时候发生的操作 */
        img:hover {
            /* 设置元素的边框,大小1px  实线  颜色是红色 */
            border: 10px solid red;
            width: 300px;
            height: 300px;
        }

        li {
            background-color: yellow;
            width: 200px;

            border: 1px solid #999;

        }

        /* start_55 */
        a {
            color: black;
        }

        /* 当li滑过的时候,li的背景颜色变成红色 */
        li:hover {
            background-color:darkorchid;
        }

        /* 当li滑过的时候,li标签下的所有的a标签的样式 */
        li:hover a {
            color: white;
        }
    </style>
</head>

<body>
    <a href="http://www.baidu.com" target="_blank">百度一下</a>


    <div>
        <img src="images/case4.png" alt="图片加载失败">
        <img src="images/case4.png" alt="图片加载失败">
        <img src="images/case4.png" alt="图片加载失败">
        <img src="images/case4.png" alt="">

        <hr>

        <ul>
            <li><a href="#">梦纤石的牵绊</a></li>
            <li><a href="#">诛璃石的断杀</a></li>
            <li><a href="#">君清石的思念</a></li>
            <li><a href="#">凤瞳石的轻鸣</a></li>
            <li><a href="#">琥冥石的乖戾</a></li>
        </ul>
    </div>
</body>

</html>